<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>选择通道</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<link th:href="@{/ksdH5/css/public/dizhi.css}" rel="stylesheet" />
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>
<link th:href="@{/ksdH5/css/quick/selectChannel.css}" rel="stylesheet"/>
</head>
<body>
<div class="mui-content">
	<div class="headerBox">
		<a href="javascript:history.go(-1);"   class="headerBox_left"><img th:src="@{/ksdH5/img/planList/fanhuiBnt.png}"></a>
		<span>选择通道</span>
	</div>
	<div class="selectChannelBox">
<!-- 		<a href="javascript:void(0);" class="selectChannelBox_contBox selectChannelBox_cont_cs">
			<div class="selectChannelBox_cont_left_cs">
				<div class="selectChannelBox_cont_left_top color_cs">快捷收款A</div>
				<div class="selectChannelBox_cont_left_middle color_cs">手续费：66元/万+1元</div>
				<div class="selectChannelBox_cont_left_bottom">
					<span class="color_cs">交易限额：200-20000/笔</span>
					<em class="color_cs">交易时间：9:00-21:30</em>
				</div>
			</div>
			<div class="selectChannelBox_cont_right_cs">
				<img th:src="@{/ksdH5/img/quick_tdImg1.png}" />
			</div>
		</a>
		<a href="javascript:void(0);" class="selectChannelBox_contBox selectChannelBox_cont_ls">
			<div class="selectChannelBox_cont_left_ls">
				<div class="selectChannelBox_cont_left_top color_ls">快捷收款A</div>
				<div class="selectChannelBox_cont_left_middle color_ls">手续费：66元/万+1元</div>
				<div class="selectChannelBox_cont_left_bottom">
					<span class="color_ls">交易限额：200-20000/笔</span>
					<em class="color_ls">交易时间：9:00-21:30</em>
				</div>
			</div>
			<div class="selectChannelBox_cont_right_ls">
				<img th:src="@{/ksdH5/img/quick_tdImg2.png}" />
			</div>
		</a> -->
	</div>
</div>
<!-- 开通通道提示框-->
<div class="selectChannelBox_tishiBg"></div>
<div class="selectChannelBox_tishiBox">
	<div class="selectChannelBox_tishiBox_top">
		<a href="javascript:void(0);" class="selectChannelBox_tishiBox_top_close"><img th:src="@{/ksdH5/img/selectChannel_close.png}" /></a>
	</div>
	<div class="selectChannelBox_tishiBox_middle">
		<div class="s_t_m_top"><img th:src="@{/ksdH5/img/yinlianLogo.png}" />银联绑卡</div>
		<div class="s_t_m_middle">
			<span>信用卡：</span>
			<em id="open_acq_bankcard"></em>
		</div>
		<div class="s_t_m_middle">
			<span>手机号：</span>
			<em id="open_acq_phone"></em>
		</div>
		<div class="s_t_m_bottom">
			<strong>验证码：</strong>
			<input type="tel" maxlength="6" id="open_acq_code" placeholder="输入验证码" />
			<a href="javascript:void(0);"  class="T-getCode" onclick="sendQuickSMS()">获取验证码</a>
			<span class="T-getCode1"></span>
		</div>
	</div>
	<button class="selectChannelBox_tishiBox_bnt" onclick="submitAcq()">确定</button>
</div>
<!--输入交易密码框-->
<div class="tradePassword_tishiBg" ></div>
<div class="tradePassword_tishiBox" >
	<div class="selectChannelBox_tishiBox_top">
		<a href="javascript:void(0);" class="tradePassword_tishiBox_close"><img th:src="@{/ksdH5/img//selectChannel_close.png}" /></a>
	</div>
	<div class="selectChannelBox_tishiBox_middle">
		<div class="s_t_m_top">交易密码</div>
		<div class="s_t_m_bottom tradePassword_bottom">
			<strong>交易密码：</strong>
			<input id="tranPassword" type="password" placeholder="输入交易密码" />
		</div>
	</div>
	<button class="selectChannelBox_tishiBox_bnt"  onclick="checkPassword()">确定</button>
</div>
<!--选择城市-->
<div class="tradePassword_cityBg"></div>
<div class="tradePassword_cityBox">
	<div class="selectChannelBox_tishiBox_top">
		<a href="javascript:void(0);" class="tradePassword_cityBox_close"><img th:src="@{/ksdH5/img/selectChannel_close.png}" /></a>
	</div>
	<div class="selectChannelBox_tishiBox_middle">
		<div class="s_t_m_top">选择城市</div>
		<div class="s_t_m_bottom tradePassword_bottom">
			<strong>选择城市：</strong>
			<input type="text" class="select-value" value="请选择城市">
		</div>
	</div>
	<a href="javascript:void(0);" class="tradePassword_cityBox_bnt" onclick="confimCity()">确定</a>
</div>
<!--验证码提示框-->
<div class="succeedBox_bg" style="display: none;"></div>
<div class="succeedBox_contBox" style="display: none;">
 <div class="selectChannelBox_tishiBox_top">
  <a href=" " class="succeedBox_contBox_close"><img th:src="@{/ksdH5/img//selectChannel_close.png}"/></a>
 </div>
 <div class="selectChannelBox_tishiBox_middle">
  <div class="s_t_m_top"><img th:src="@{/ksdH5/img//yinlianLogo.png}"/>快捷支付</div>
  <div class="s_t_m_middle">
   <span>手机号：</span>
   <em id="submitQuickPhone"></em>
  </div>
  <div class="s_t_m_bottom succeedBox_contBox_bottom">
   <strong>验证码：</strong>
   <input type="tel" maxlength="6"   id="submitQuickCode" placeholder="输入验证码" />
  </div>
 </div>
 <button class="succeedBox_contBox_bnt" onclick="submitQuick()">确定</button>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
//获得项目根路径
var ctx = [[@{/}]];
//取出后台modelMap中的值
var result= [[${result}]];
var quickMoney= [[${quickMoney}]];//快捷金额
var cardNo= [[${cardNo}]];//银行卡编号
var bankId= [[${bankId}]];//银行卡id
</script>
<script type="text/javascript">
mui.init({
	swipeBack:true
})
/*提示框*/
$(document).on('click','.selectChannelBox_contBox',function(){
 	/* var btnArray = ['取消', '确认'];
	mui.confirm('您需要先开通银联支付才能制定继续下一步操作，是否立即开通？','提示', btnArray, function(e) {
        if (e.index == 1) {
            $('.selectChannelBox_tishiBg').show();
            $('.selectChannelBox_tishiBox').show();
        } else {
            
        }
    }) */
});
/*关闭获取验证码页面*/
$(document).on('click','.selectChannelBox_tishiBox_top_close',function(){
	$('.selectChannelBox_tishiBg').hide();
    $('.selectChannelBox_tishiBox').hide();
});
/*关闭交易密码输入框*/
$(document).on('click','.tradePassword_tishiBox_close',function(){
	$('.tradePassword_tishiBg').hide();
    $('.tradePassword_tishiBox').hide();
});


/*输入城市*/
$(document).on('click','.selectChannelBox_contBox',function(){
	/* $('.tradePassword_cityBg').show();
	$('.tradePassword_cityBox').show(); */
});
$(document).on('click','.tradePassword_cityBox_close',function(){
	$('.tradePassword_cityBg').hide();
	$('.tradePassword_cityBox').hide();
});
</script>

<script type="text/javascript">
//获取短信验证码
$(function(){
    var validCode=true;
    $(".T-getCode").click (function  () {
        var time=60;
        var $code=$(this);
        if (validCode) {
            validCode=false;
            var t=setInterval(function  () {
                time--;
                $(".T-getCode").hide();
                $(".T-getCode1").show();
                $(".T-getCode1").html(time+"秒");
                if (time==0) {
                    clearInterval(t);
                    $(".T-getCode").html("重新获取");
		            $(".T-getCode1").hide();
                	$(".T-getCode").show();
                    validCode=true;
                }
            },1000)
        }
    })
    
    
    
})
</script>


<script type="text/javascript">
//滚动条到底部加载更多
$(document).scroll(function(){
	if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        var shopIndex_box_listBox = new Array()
        for (a=0;a<20;a++){
        	shopIndex_box_listBox[a] = ''
        }
		for(i=0;i<shopIndex_box_listBox.length;i++){
			$(".selectChannelBox").append(shopIndex_box_listBox[i]);
		}
        
        /*$.ajax({
        	type:"post",
        	url:"",
        	async:true,
			dataType:"json",
			success:function(data){
				for (var i = 0; i < sum; i++) {   
	                result +=	''
	            }
				$('.palnCont_listBox').append(result);
			},
			error:function(){
				alert('数据有误');
			}
        }); */
	}
});

$(function(){
	//遍历通道
	if(result.status == "out"){
		//跳转登陆页面
		location.href = ctx + 'h5/login';
	}	
	
	var obj = result.obj;
	var reJson = JSON.parse(obj.returnMsg);
	var acqList = reJson.acqData;
	if(acqList.length>0){
		var acqStr="";
		for(var i=0;i<acqList.length;i++){
			if(i==0){  //只有第一个通道样式和图片不一样 后面的都是同一个样式
				acqStr += '<a  href="javascript:void(0);"  onclick="checkAcq(\''+acqList[i].acqcode+'\')"   class="selectChannelBox_contBox selectChannelBox_cont_cs">';
			}else {
				acqStr += '<a  href="javascript:void(0);"  onclick="checkAcq(\''+acqList[i].acqcode+'\')"   class="selectChannelBox_contBox selectChannelBox_cont_ls">';
			}
			acqStr += "<div class='selectChannelBox_cont_left_cs'>";
			acqStr += "<div class='selectChannelBox_cont_left_top color_cs'>"+acqList[i].channelName+"</div>";
			var rateMoney = Math.floor(acqList[i].rate * 100);
			acqStr += "<div class='selectChannelBox_cont_left_middle color_cs'>手续费："+rateMoney+"/万+"+acqList[i].remark+"元</div>";
			acqStr += "<div class='selectChannelBox_cont_left_bottom'>";
			var strArr = acqList[i].limit.split("；");
			acqStr += "<span class='color_cs'>"+strArr[0]+"</span>";
			acqStr += "<em class='color_cs'>"+strArr[1]+"</em>";
			acqStr += "</div>";
			acqStr += "</div>";
			acqStr += "<div class='selectChannelBox_cont_right_cs'>";
			if(i==0){
				acqStr += "<img src='/ksdH5/img/quick_tdImg1.png'/>";
			}else {
				acqStr += "<img src='/ksdH5/img/quick_tdImg2.png'/>";
			}
			acqStr += "</div>";
			acqStr += "</a>";
		}
		$(".selectChannelBox").html(acqStr);
	}
})
var currentAcqCode;//全局变量  当前选中通道编号
var kt_phone;//全局变量  开通通道的手机号
var sendCodeResult;//定义全局变量 提交快捷的一个参数
//选择通道 并判断通道是否已开通
function  checkAcq(acqCode){
	currentAcqCode = acqCode;//当前选择的通道编号
	$.ajax({
		type:"POST",
		url:ctx+"h5/quick/checkAcq",
		async:true,
		dataType:"json",
		data:{
			"bankcard":cardNo,
			"accmoney":quickMoney,
			"AcqCode":acqCode
		},
		success:function(re){
			if(re.status == "out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}	
			if(re.status == "SUCCESS"){
				var obj = re.obj;
				var kt_tips = obj.kt_tips;//后台提示信息
				var kt_status = obj.kt_status;//开通状态 0：未开通 1：已开通
				if(kt_status=="0"){ 
					var btnArray = ['取消', '确认'];
					mui.confirm('您需要先开通银联支付才能制定继续下一步操作，是否立即开通？','提示', btnArray, function(e) {
				        if (e.index == 1) {
				            $('.selectChannelBox_tishiBg').show();
				            $('.selectChannelBox_tishiBox').show();
				            $("#open_acq_phone").text(obj.kt_phone.substr(0,4)+" *** "+obj.kt_phone.substr(7));
				           var str="";
				            for(var i =0;i<cardNo.length-8;i++){
				            	str +="*";
				            }
				            $("#open_acq_bankcard").text(cardNo.substr(0,4)+" "+str+" "+cardNo.substr(cardNo.length-4));
				        } else {
				            
				        }
				    })
					mui.toast(kt_tips,{ duration:'long'});
					return;
				}else if (kt_status=="1"){//已开通
					//显示城市选择框
					$('.tradePassword_cityBg').show();
					$('.tradePassword_cityBox').show();
					kt_phone = obj.kt_phone;
				}
			}else {
				mui.toast(re.msg,{ duration:'long'});
			}	
		},
		error:function(){
			mui.toast("服务器异常",{ duration:'long'});
		}
	}); 
}
var open_acq_result;
//发送开通通道短信验证码
function sendQuickSMS(){
	$.ajax({
		type:"POST",
		url:ctx+"h5/quick/prebind",
		async:true,
		dataType:"json",
		data:{
			"cardid":bankId,
			"acqcode":currentAcqCode
		},
		success:function(re){
			if(re.status == "out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}	
			var obj = re.obj;
			
			if(re.status=="SUCCESS"){//发送成功
				open_acq_result = obj.result;
				mui.toast( re.msg,{ duration:'long'});
			}else {
				mui.toast( re.msg,{ duration:'long'});
			}
		},
		error:function(){
			mui.toast("服务器异常",{ duration:'long'});
		}
	});
	
}

function submitAcq(){
	var smscode = $.trim($("#open_acq_code").val());//短信验证码
	if(smscode.length<4){
		mui.toast("请输入正确的验证码",{ duration:'long'});
	}
	 $.ajax({
			url : ctx+ "h5/plan/submitAcq",
			type : "POST",
			data:{
				"smscode":smscode,
				"result":open_acq_result,
				"acqcode":currentAcqCode,
				"cardid":bankId
			},
			success : function(re) {
				if(re.status == "out"){
					//跳转登陆页面
					location.href = ctx + 'h5/login';
				}	
				if (re.status == "SUCCESS") {
					//开通成功
					iskt = true;
					$(".selectChannelBox_tishiBg").hide();
					$(".selectChannelBox_tishiBox").hide();
					mui.toast(re.msg,{ duration:'long'});
				} else {
					mui.toast(re.msg,{ duration:'long'});
				}
			}
	}); 
}




function confimCity(){
	var cityName = $.trim($(".select-value").val());
	if(cityName==""||cityName=="请选择城市"){
		mui.toast("请选择城市",{ duration:'long'});
		return;
	}
	$('.tradePassword_cityBg').hide();
	$('.tradePassword_cityBox').hide();
	//弹出交易密码验证提示框
	$(".tradePassword_tishiBox").show();
	$(".tradePassword_tishiBg").show();
}



//验证交易密码
 function checkPassword(){
	var password =  $.trim($("#tranPassword").val());
	var reg=/^[1-9]+\d*$/;
	if((!reg.test(password)) || (password.length!=6)){
		 mui.toast("请填写正确的六位数字交易密码",{ duration:'long'});
		 return;
	}
	$.ajax({
		type:"POST",
		url:ctx+"h5/quick/checkTransPW",
		async:true,
		dataType:"json",
		data:{
			"transPW":password,
			"acqcode":currentAcqCode,
			"cardid":bankId,
			"money":quickMoney,
			"addr":$.trim($(".select-value").val())
		},
		success:function(re){
			if(re.status == "out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}	
			var obj = re.obj;
			if(re.status=="SUCCESS"){//交易密码正确
				//关闭交易密码验证提示框
				$(".tradePassword_tishiBox").hide();
				$(".tradePassword_tishiBg").hide();
				mui.toast(re.msg,{ duration:'long'});
				sendCodeResult = obj.result;
				//弹出验证码输入框 
				$("#submitQuickPhone").text(kt_phone.substr(0,4)+"***"+kt_phone.substr(8));
				$(".succeedBox_contBox").show();
				$(".succeedBox_bg").show();
			}else {
				mui.toast(re.msg,{ duration:'long'});
			}
		},
		error:function(){
			mui.toast("服务器异常",{ duration:'long'});
		}
	}); 
 }

function submitQuick(){
	var submitQuickCode =$.trim($("#submitQuickCode").val());
	if(submitQuickCode.length<4){
		mui.toast("请输入正确的验证码",{ duration:'long'});
	}
	$.ajax({
		type:"POST",
		url:ctx+"h5/quick/comfirmfast",
		async:true,
		dataType:"json",
		data:{
			"smscode":submitQuickCode,
			"result":sendCodeResult, 
			"addr":$.trim($(".select-value").val()),
			"money":quickMoney,
			"acqcode":currentAcqCode,
			"cardid":bankId
		},
		success:function(re){
			if(re.status == "out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}	
			var obj = re.obj;
			if(re.status=="SUCCESS"){
				$(".succeedBox_contBox").hide();
				$(".succeedBox_bg").hide();
			}
			mui.toast(re.msg,{ duration:'long'});
		},
		error:function(){
			mui.toast("服务器异常",{ duration:'long'});
		}
	}); 
	
}
</script>
 <script th:src="@{/ksdH5/js/public/dizhi.js}"></script>
</html>
